<%@include file="context.jsp"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<%@include file="common_imports.jsp"%>
<%@include file="common_frontend_imports.jsp"%>
<script type="text/javascript"
	src="<c:url value="/resources/js/exporting.js" />"></script>

<script type="text/javascript">
	$(document).ready(function() {
		updateCharts();
		$("#dataTabs").tabs();
		$("#signalTabs").tabs();
		$("#highTabs").tabs();

	});

	function updateCharts() {
		createCharts("asi", "container_ASI", "intraday", "Asi Chart");
		createCharts("snp", "container_SNP", "intraday", "SNP Chart");
	}

	function createCharts(data, containerId, timeRange, value) {
		//timeRange = "intraday";
		if (timeRange == null) {
			timeRange = 'daily';
		}

		Highcharts.setOptions({
			global : {
				timezoneOffset : ((-5.50) * 60)
			}
		});

		$
				.getJSON(('/StockScreener/asicharts?code=' + data
						+ '&timeRange=' + timeRange), function(data) {
					// Create the chart
					var element = $('#' + containerId);
					if (timeRange == "intraday") {
						element.highcharts('StockChart', {
							rangeSelector : {
								selected : 1,
								inputEnabled : element.width() > 480
							},

							title : {
								text : value
							},

							rangeSelector : {
								buttons : [ {
									type : 'hour',
									count : 1,
									text : '1h'
								}, {
									type : 'day',
									count : 1,
									text : '1D'
								}, {
									type : 'all',
									count : 1,
									text : 'All'
								} ],
								selected : 1,
								inputEnabled : false
							},
							series : [ {
								name : value,
								type : 'line',
								data : data,
								tooltip : {
									valueDecimals : 2
								}
							} ],
							exporting : {
								buttons : {
									customButton : {
										text : 'Swith to Historical',
										onclick : function() {
											//alert('You pressed the button!');
											createCharts(data, containerId,
													"daily", value);
										}
									}
								}
							}

						});

					} else {
						element.highcharts('StockChart', {
							rangeSelector : {
								selected : 1,
								inputEnabled : element.width() > 480
							},
							title : {
								text : value
							},
							series : [ {
								name : value,
								type : 'line',
								data : data,
								tooltip : {
									valueDecimals : 2
								}
							} ],

							exporting : {
								buttons : {
									customButton : {
										text : 'Swith to Intraday',
										onclick : function() {
											//alert('You pressed the button!');
											createCharts(data, containerId,
													"intraday", value);
										}
									}
								}
							}
						});

					}
				});

	}
</script>
</head>

<body>

	<div class="main_wrapper">
		<div class="container-fluid">
			<div class="row-fluid">
				<%@include file="stockscreener/header.jsp"%>
			</div>

			<div class="row-fluid">
				<div class="main_menu_wrapper span12">
					<div class="navbar">
						<div class="navbar-inner">
							<div class="container">
								<button class="btn btn-navbar collapsed"
									data-target=".nav-collapse" data-toggle="collapse"
									type="button">
									<div class="icon_wrapper"
										style="float: right; padding: 5px 10px;">
										<span class="icon-bar"></span> <span class="icon-bar"></span>
										<span class="icon-bar"></span>
									</div>
								</button>
								<div class="nav-collapse collapse">
									<%@include file="header_link.jsp"%>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="header_stock_screener_wrapper ">
				<div class="row-fluid">
					<div class="header_stock_screener_left span4">
						<div class="row-fluid">
							<div class="aspi_box span6">
								<table width="100%" border="0">
									<tr>
										<td width="75%" class="aspi_box_left">ASPI</td>
										<td width="25%" class="aspi_box_right"><fmt:formatNumber
												maxFractionDigits="${MaxFraction}"
												minFractionDigits="${MinFraction}" value="${currentAsi}" />
											<br /> <fmt:formatNumber maxFractionDigits="${MaxFraction}"
												minFractionDigits="${MinFraction}" value="${asiValueChange}" />
											<br /> <fmt:formatNumber maxFractionDigits="${MaxFraction}"
												minFractionDigits="${MinFraction}"
												value="${asiChangePercent}" />%</td>
									</tr>
								</table>
							</div>
							<div class="spsl_box span6">
								<table width="100%" border="0">
									<tr>
										<td width="75%" class="spsl_box_left">S&P SL20</td>
										<td width="25%" class="spsl_box_right"><fmt:formatNumber
												maxFractionDigits="${MaxFraction}"
												minFractionDigits="${MinFraction}" value="${currentSnp}" />
											<br /> <fmt:formatNumber maxFractionDigits="${MaxFraction}"
												minFractionDigits="${MinFraction}" value="${snpValueChange}" />
											<br /> <fmt:formatNumber maxFractionDigits="${MaxFraction}"
												minFractionDigits="${MinFraction}"
												value="${snpChangePercent}" />%</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
					<div class="header_stock_screener_center span4">
						<!-- to changed -->
						<div class="row-fluid">
							<div class="progress_wrapper">
								<div class="progress">
									<div
										class="progress-bar progress-bar-success progress-bar-striped"
										style="width: ${noOfGainersPre}%;">
										<span class="sr-only">${noOfGainers}</span>
									</div>
									<div
										class="progress-bar progress-bar-default progress-bar-striped"
										style="width: ${noOfUnchangedPre}%;">
										<span class="sr-only">${noOfUnchanged}</span>
									</div>
									<div
										class="progress-bar progress-bar-danger progress-bar-striped"
										style="width: ${noOfLoosersPre}%;">
										<span class="sr-only">${noOfLoosers}</span>
									</div>
								</div>
							</div>
						</div>
						<!-- end -->
					</div>
					<div class="header_stock_screener_right span4">
						<div class="row-fluid">
							<div class="share_volum_box span6">
								<div>Share Volume</div>
								<span><fmt:formatNumber maxFractionDigits=""
										minFractionDigits="" value="${totalMktVolume}" /></span>
							</div>
							<div class="turnover_box span6">
								<div>Turnover</div>
								<span><fmt:formatNumber maxFractionDigits=""
										minFractionDigits="" value="${totalTurnOver}" /></span>
							</div>
						</div>
					</div>

				</div>
			</div>

			<div class="stock_screener_wrapper">
				<div class="row-fluid">
					<div class="stock_screener_wrapper_left span6">
						<h3>ASPI</h3>
						<div id="container_ASI"></div>
					</div>
					<div class="stock_screener_wrapper_left span6">
						<h3>S&P SL20</h3>
						<div id="container_SNP"></div>
					</div>
				</div>
			</div>

			<div class="table_02">
				<div class="row-fluid">
					<div id="dataTabs">
						<ul class="nav nav-tabs" id="myTab">
							<li><a href="/StockScreener/home_components/topgainer.html">Top
									gainers</a></li>
							<li><a href="/StockScreener/home_components/toplooser.html">Top
									losers</a></li>
							<li><a
								href="/StockScreener/home_components/hightsturnover.html">Highest
									Turnover</a></li>
							<li><a href="/StockScreener/home_components/mostactive.html">Most
									Active</a></li>
							<li><a
								href="/StockScreener/home_components/sectorsummary.html">Sector
									Summary</a></li>
							<li><a href="/StockScreener/home_components/largecap.html">Large
									Cap</a></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="table_02">
				<div class="row-fluid">
					<div id="signalTabs">
						<ul class="nav nav-tabs" id="myTab">
							<li><a href="/StockScreener/home_components/high.html">High</a></li>
							<li><a href="/StockScreener/home_components/low.html">Low</a></li>
							<li><a
								href="/StockScreener/home_components/over_bought.html">RSI -
									Over Bought</a></li>
							<li><a href="/StockScreener/home_components/over_sold.html">RSI
									- Over Sold</a></li>
							<li class="sma_grid"><a id="sma_50"
								href="/StockScreener/home_components/sma50_crossing.html">SMA
									50</a></li>
							<li class="sma_grid" id="sma_20"><a
								href="/StockScreener/home_components/sma20_crossing.html">SMA
									20</a></li>
							<li class="sma_grid"><a id="sma_20"
								href="/StockScreener/home_components/sma10_crossing.html">SMA
									10</a></li>
							<li><a
								href="/StockScreener/home_components/most_volatality.html">Most
									Volatile</a></li>
							<li><a
								href="/StockScreener/home_components/unusal_volume.html">Unusal
									Volume</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="footer_wrapper">
				<%@include file="footer.jsp"%>
			</div>
		</div>
	</div>
</body>
</html>
